import React from 'react'
import {Col, Radio, Row, Table, Card, Modal} from "antd";
import moment from "moment";
import isPlainObject from "react-redux/lib/utils/isPlainObject";
import UserModel from "../../model/user";
import PaginationFooter from "../PaginationFooter/PaginationFooter";

const mb16 = {
    marginBottom: '16px',
}

class ActivitySummary extends React.Component {

    constructor(props) {
        super(props)
        this.model = new UserModel()
        this.state = {
            liaotianDetailPageIndex: 0,
            liaotianTitle: '',
            liaotianDetail: [],
            modal: {
                liaotianDetail: false,
            }
        }
    }

    controlModal = (key, show,) => {
        this.setState({
            ...this.state.state,
            modal: {
                ...this.state.modal,
                [key]: show,
            }
        })
    }

    renderItem = (key, value) => {

        if (isPlainObject(value)) {
            return <Card
                title={key}
                style={{width: '200px', display: 'inline-block', margin: '8px',}}
            >
                {value.render(value.value)}
            </Card>
        }

        return <Card
            title={key}
            style={{width: '200px', display: 'inline-block', margin: '8px',}}
        >
            <p>{value}</p>
        </Card>
    }

    liaotianDetail = () => {
        const user = this.props.user
        // type GetMatchChitChatJson struct {
        //     Username  string //用户名
        //     Matchname string //比赛名
        //     P         int
        // }
        const Namiid = this.state.liaotianData.NamiId
        const P = this.state.liaotianDetailPageIndex
        console.log(this.props.liaotianFlag)
        let params = {
            Namiid,
            P,
            Flag: this.props.liaotianFlag,
        }
        if (user) {
            // const Username = user.Username
            params.Username = user.Username
        }
        if (this.props.liaotianFlag === 2) {
            params.Liaotianid = this.state.liaotianId
        }
        this.model.liantiaoDetail(params).then(res => {
            this.setState({
                liaotianDetail: res.data.ok,
            })
        })


    }

    renderTable = (list) => {
        const defaultRender = (text) => text
        const timeRender = (time) => moment(new Date(time * 1000)).format('YYYY年MM月DD月 HH:mm ')
        
        const columns = [
            {
                title: '纳米Id',
                dataIndex: 'NamiId',
                render: defaultRender,

            },
            {
                title: '时间',
                dataIndex: 'Startt',
                render: timeRender
            },
            {
                title: '聊天人次',
                dataIndex: 'Count',
            },
            {
                title: '赛事',
                render: (record) => {
                    const c = record.Name[0]
                    const h = record.Zhuname[0]
                    const a = record.Kename[0]
                    const name = `${c} - ${h} vs ${a}`
                    return name
                }
            },

            {
                title: '操作',
                render: (_, record) => {
                    return <a
                        onClick={() => {
                            const c = record.Name[0]
                            const h = record.Zhuname[0]
                            const a = record.Kename[0]
                            const name = `${c} - ${h} vs ${a}`
                            this.setState({
                                liaotianTitle: name,
                                liaotianData: record,
                                liaotianId: record.Liaotianid,
                            }, () => {
                                this.controlModal('liaotianDetail', true)
                                this.liaotianDetail(record)
                            })
                        }}
                    >查看</a>
                }
            },
        ]


        const table = <div>
            {/*<span style={mb16}>聊天统计</span>*/}
            <Table
                dataSource={list}
                rowKey={(record, index) => index}
                columns={columns}
            />
        </div>

        return table
    }

    render() {

        // const list = this.props.activity.liaotian
        // const {
        //     total,
        //     zhuanfa,
        //     xinwen,
        //     shiping,
        //     shichang,
        // } = this.props.activity

        const itemTitleMapper = {
            zongshu: '注册用户总数',
            total: '用户数量',
            zhuanfa: '转发',
            xinwen: '新闻',
            shiping: '视屏',
            shichang: '在线时长',
            zuori: '昨日新增注册用户',
            zuoriLogin: '昨日登入注册用户',
            zhouLogin: '近一周登入注册用户',
            zhouPinglun: '近一周评论用户',
            online: '实时在线人数',
            onlineVip: '会员总数',
            任务: '任务',
            我的: '我的',
            新闻: '新闻',
            比赛: '比赛',
            点击比赛: '点击比赛',
            筛选: '筛选',
            视频: '视频',
            visit: '昨日登入用户',
        }

        const arr = Object.entries(this.props.activity)

        const main = arr.map(([key, value,], index) => {
            if (key === 'liaotian' && value) {
                return <React.Fragment
                    key={index}
                >{this.renderTable(value)}</React.Fragment>
            } else {
                const title = itemTitleMapper[key]
                if ((value || value === 0)) {
                    return <React.Fragment
                        key={index}
                    >
                        {this.renderItem(title ? title : key , value)}
                    </React.Fragment>
                }
            }
        })
        // console.log(this.state.liaotianDetail)
        // Createt: 1613701540
        // Flag: 0
        // Matchname: "墨西乙"
        // Msg: "自治区直辖市一球"
        // Namiid: 3492819
        // Nickname: ""
        // Uid: "827314a8-483d-443a-909b-0cd629caebc5"
        // Username: "okNeEwfkSgGHtK1xsKUFuKcHHsHM"
        const liaotianDetailModal = <Modal
            visible={this.state.modal.liaotianDetail}
            onCancel={() => {
                this.setState({
                    liaotianDetailPageIndex: 0,
                })
                this.controlModal('liaotianDetail', false)
            }}
            title={this.state.liaotianTitle}
            width={'80%'}
        >

            <Table
                dataSource={this.state.liaotianDetail}
                columns={[
                    {
                        dataIndex: 'Username',
                        title: '用户名',
                    },
                    {
                        dataIndex: 'Nickname',
                        title: '昵称',
                    },
                    {
                        dataIndex: 'Createt',
                        title: '时间',
                        render: (time) => moment(new Date(time * 1000)).format('YYYY-MM-DD HH:mm')
                    },
                    {
                        dataIndex: 'Msg',
                        title: '消息',
                    }
                ]}
                rowKey={(record, index) => index}
                pagination={false}
            />

            <PaginationFooter
                pageIndex={this.state.liaotianDetailPageIndex}
                prevPage={() => {
                    this.setState({
                        liaotianDetailPageIndex: this.state.liaotianDetailPageIndex - 1,
                    }, () => {
                        this.liaotianDetail()
                    })
                }}
                nextPage={() => {
                    this.setState({
                        liaotianDetailPageIndex: this.state.liaotianDetailPageIndex + 1,
                    }, () => {
                        this.liaotianDetail()
                    })
                }}
            />

        </Modal>

        return <div>
            {liaotianDetailModal}
            {main}
        </div>

        // const defaultRender = (text) => text
        // const timeRender = (time) => moment(new Date(time * 1000)).format('YYYY年MM月DD月 HH:mm ')
        //
        //
        // const columns = [
        //     {
        //         title: '纳米Id',
        //         dataIndex: 'NamiId',
        //         render: defaultRender,
        //
        //     },
        //     {
        //         title: '时间',
        //         dataIndex: 'Startt',
        //         render: timeRender
        //     },
        //     {
        //         title: '聊天人次',
        //         dataIndex: 'Count',
        //     },
        //     {
        //         title: '赛事',
        //         render: (record) => {
        //             const c = record.Name[0]
        //             const h = record.Zhuname[0]
        //             const a = record.Kename[0]
        //             return `${c} - ${h} vs ${a}`
        //         }
        //     }
        // ]
        //
        //
        // const table = <div>
        //     <span style={mb16}>聊天统计</span>
        //     <Table
        //         dataSource={list}
        //         rowKey={(record, index) => index}
        //         columns={columns}
        //     />
        // </div>

        // return (
        //     <>
        //         <Row style={mb16}>
        //             <Col span={6}>
        //                 <span style={{marginRight: '8px',}}>总数: </span>
        //             </Col>
        //             <Col span={18}>
        //                 <span style={{marginRight: '8px',}}>{total}</span>
        //             </Col>
        //         </Row>
        //
        //         <Row style={mb16}>
        //             <Col span={6}>
        //                 <span style={{marginRight: '8px',}}>转发数: </span>
        //             </Col>
        //             <Col span={18}>
        //                 <span style={{marginRight: '8px',}}>{zhuanfa}</span>
        //             </Col>
        //         </Row>
        //
        //         <Row style={mb16}>
        //             <Col span={6}>
        //                 <span style={{marginRight: '8px',}}>新闻点击: </span>
        //             </Col>
        //             <Col span={18}>
        //                 <span style={{marginRight: '8px',}}>{xinwen}</span>
        //             </Col>
        //         </Row>
        //
        //         <Row style={mb16}>
        //             <Col span={6}>
        //                 <span style={{marginRight: '8px',}}>视频点击: </span>
        //             </Col>
        //             <Col span={18}>
        //                 <span style={{marginRight: '8px',}}>{shiping}</span>
        //             </Col>
        //         </Row>
        //         {table}
        //     </>
        // )

    }


}

export default ActivitySummary